.task-progress {
  --_background-color: var(--mantine-color-gray-2);

  height: var(--mantine-radius-md);
  border-radius: var(--mantine-radius-md);
  background-color: var(--_background-color);

  &__line {
    position: relative;
    min-width: var(--mantine-radius-md);
    height: 100%;
    border-radius: var(--mantine-radius-md);
    background-image: linear-gradient(
      to right,
      var(--mantine-color-yellow-6),
      var(--mantine-color-grape-6)
    );
    transition: width 0.15s ease-in-out;

    &::before {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-image: inherit;
      opacity: 0.5;
      filter: blur(8px);
      content: '';
    }
  }
}

[data-mantine-color-scheme='dark'] {
  .task-progress {
    --_background-color: var(--mantine-color-dark-6);
  }
}
